<!--
 
 @Author: mosowe
 @Date:2023-02-01 17:30:48
-->

<template>
	<view class="my-comm">
		<view class="top">
			<view :class="userInfo ?'background':'background1'"></view>
		</view>
		<view class="user-card" v-if="userInfo">
			<view class="card">
				<view class="top">
					<view class="userImage">
						<!-- <open-data type="userAvatarUrl"></open-data> -->
						<image src="../../../static/bug.png" mode="" :style="{
							width:'90%',
							height:'90%'
						}"></image>
					</view>
				</view>
				<view class="bottom">
					<view class="left">
						<view class="user-text">
							<!-- <open-data type="userNickName"></open-data> -->
							<view class="">
								{{userInfo?.phone || ''}}
							</view>
						</view>
						<!-- <view class="user-phone"> 171****4133 </view> -->
					</view>
					<view class="right flex-center">
						<!-- <uni-icons type="right" color='#333333' size="20"></uni-icons> -->
					</view>
				</view>
			</view>
		</view>


		<view class="list-card">
			<view class="card" @click="handerEvent('publishedTasks')">
				<view class="item item-bottom-solid">
					<!-- 		<view class="left flex-center">
						<image src="../../static/myIcon/qiu.png" mode="aspectFit"></image>
					</view> -->

					<view class="center">
						<uni-icons type="calendar" color='#333333' size="20"></uni-icons><text>我的任务</text>
					</view>
					<view class="right flex-center">
						<uni-icons type="right" color='#333333' size="20"></uni-icons>
					</view>
				</view>
			</view>
			<view class="card" @click="handerEvent('tasksPickedUp')">
				<view class="item item-bottom-solid">
					<!-- 	<view class="left flex-center">
						<image src="../../static/myIcon/1.png" mode="aspectFit"></image>
					</view> -->

					<view class="center">
						<uni-icons type="wallet" color='#333333' size="20"></uni-icons><text>我的需求</text>
					</view>
					<view class="right flex-center">
						<uni-icons type="right" color='#333333' size="20"></uni-icons>
					</view>
				</view>
			</view>
			<view class="card" @click="handerEvent('toCooperation')">
				<view class="item item-bottom-solid">
					<!-- 	<view class="left flex-center">
						<image src="../../static/myIcon/1.png" mode="aspectFit"></image>
					</view> -->

					<view class="center">
						<uni-icons type="headphones" color='#333333' size="20"></uni-icons><text>意见反馈/商务合作</text>
					</view>
					<view class="right flex-center">
						<uni-icons type="right" color='#333333' size="20"></uni-icons>
					</view>
				</view>
			</view>
			<view class="card" @click="handerEvent('rule')">
				<view class="item item-bottom-solid">
					<view class="center">
						<uni-icons type="info" color='#333333' size="20"></uni-icons><text>规则说明</text>
					</view>
					<view class="right flex-center">
						<uni-icons type="right" color='#333333' size="20"></uni-icons>
					</view>
				</view>
			</view>
		</view>

		<!-- 	<view class="quit flex-center">
			<view class="btn flex-center">
				退出登录
			</view>
		</view> -->
	</view>
</template>

<script setup>
	import {
		ref,
		watch
	} from "vue";
	import {
		onLoad,
		onShow,
		onShareAppMessage,
	} from '@dcloudio/uni-app'
	const userInfo = ref(null)

	const handerEvent = (e, data) => {
		console.log(userInfo, "==userInfo==");
		switch (e) {
			case 'tasksPickedUp': //我接取的任务
				if (userInfo.value) {
					uni.navigateTo({
						url: "/pages/list/index?type=1"
					})
				} else {
					uni.navigateTo({
						url: `/pages/login/index?listType=1&goPage=list`
					})
				}

				break;
			case 'publishedTasks': //我发布的任务

				if (userInfo.value) {
					uni.navigateTo({
						url: "/pages/list/index?type=2"
					})
				} else {
					uni.navigateTo({
						url: `/pages/login/index?listType=2&goPage=list`
					})
				}
				break;
			case 'toCooperation': //商务合作

				uni.navigateTo({
					url: "/pages/cooperation/index"
				})
				break;
			case 'rule': //规则
				uni.navigateTo({
					url: "/pages/rule/index"
				})
				break;
			default:
				break;
		}

	}
	watch(() => uni?.getStorageSync('user'), (newVal, oldVal) => {
		if (newVal) {
			userInfo.value = newVal
			userInfo.value.phone = userInfo.value.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
		}

	}, {
		deep: true,
		immediate: true
	})

	onShow(() => {
		console.log("show", uni?.getStorageSync('user'));
		if (uni?.getStorageSync('user') && !userInfo.value) {
			userInfo.value = uni?.getStorageSync('user') || null
			userInfo.value.phone = userInfo.value.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
		}
	})
</script>

<style lang="scss" scoped>
	.my-comm {}
</style>


<script setup>

</script>


<style lang="scss" scoped>
	.my-comm {
		.top {
			height: 250rpx;
			position: relative;

			.background {
				background-color: #53a0ec;
				border-bottom-left-radius: 22px;
				border-bottom-right-radius: 22px;
				position: absolute;
				height: 180rpx;
				width: 100%;
			}

			.background1 {
				// background-color: #53a0ec;
				background-image: url('../../../static/bug.png');
				border-bottom-left-radius: 22px;
				border-bottom-right-radius: 22px;
				position: absolute;
				height: 180rpx;
				width: 100%;
			}
		}

		.icon {
			color: #96a1ae;
			font-size: 40rpx;
		}

		.user-card {
			height: 170rpx;
			padding: 0 15px;

			.card {
				position: relative;
				bottom: 62px;
				height: 250rpx;
				background-color: white;
				border-radius: 5px;

				.top {
					height: 30%;
					position: relative;

					.userImage {
						position: absolute;
						bottom: -15%;
						left: 10%;
						width: 150rpx;
						height: 150rpx;
						overflow: hidden;
						border-radius: 50%;
						border: 2px solid white;
						background: #F4F4F6;
						text-align: center;
					}
				}

				.bottom {
					display: flex;
					height: 70%;
					padding-top: 20rpx;

					.left {
						width: 80%;
						height: 100%;
						position: relative;

						.user-text {
							width: 100%;
							font-size: 1.6em;
							padding-left: 80rpx;
							height: 50%;
						}

						.user-phone {
							color: #96a1ae;
							padding-left: 80rpx;
							height: 50%;
							width: 100%;
							font-size: 0.9em;
						}
					}

					.right {
						width: 20%;
						height: 50%;
					}
				}
			}
		}

		.list-card {
			padding: 0 15px;

			.card {
				border-radius: 5px;
				position: relative;
				background-color: white;
				border-radius: 5px;
				padding: 5px 30px;

				.item {
					display: flex;
					height: 120rpx;

					.left {
						width: 15%;

						image {
							width: 70rpx;
							height: 70rpx;
						}
					}

					.center {
						width: 85%;
						display: flex;
						justify-content: flex-start;
						align-items: center;
						font-size: 1.1em;
					}

					.right {
						width: 20%;
						justify-content: flex-end;
					}
				}
			}
		}

		.item-bottom-solid {
			border-bottom: 1px solid #d4d6da;
		}

		.quit {
			height: 100rpx;
			margin-top: 50px;

			.btn {
				background-color: #4f99ff;
				border-radius: 30px;
				width: 80%;
				color: white;
				font-size: 1.2em;
				height: 100%;
			}
		}

		.flex-center {
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>